<template>
  <div>
    <div v-if="cardData.length > 0">
      <div v-for="(item, index) in cardData" :key="index" class="card">
        <div class="first-row card">
          <div class="title_content">
            <div class="vertical-block"></div>
            <div class="left-text">{{ item.type }}</div>
          </div>
          <div class="right-text status">{{ item.status }}</div>
        </div>
        <u-line></u-line>
        <div class="second-row card">
          <div class="phone_content">
            <image class="imageUrl" :src="'/static/9.png'" mode="aspectFit"></image>
            <div class="left-text phoneNumber">{{ item.mobile }}</div>
          </div>
          <div class="right-text amount">{{ item.price }}</div>
        </div>
        <div class="third-row card">
          <div class="left-text rechargeTime" style="color: #999999; font-size: 11px;">充值时间: {{ item.create_time }}</div>
          <div class="right-text" style="color: #333333; font-size: 11px">实际支付:{{ item.pay_price }}</div>
        </div>
        <div v-if="item.rechargeType" class="third-row card">
          <div class="left-text" style="color: #999999; font-size: 11px;">{{ item.rechargeType }}</div>
        </div>
        <div class="fourth-row card">
          <div class="left-text" style="color: #999999; font-size: 11px">订单号:{{ item.order_no }}</div>
        </div>
      </div>
    </div>
    <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
    <u-loadmore :status="status" @loadmore="loadMoreData"></u-loadmore>
  </div>
</template>

<script>
import { getOrderList } from "@/api/apiService.js";

export default {
  data() {
    return {
      cardData: [],
      pagination: {
        page: 1,
      },
      status: 'loadmore',
    };
  },

  onReachBottom() {
    if (this.status === 'loadmore') {
      this.pagination.page += 1;
      this.fetchData();
    }
  },

  created() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      if (this.status === 'loading') return;
      this.status = 'loading';

      const params = {
        user_id: 1,
        page: this.pagination.page,
      };

      try {
        const response = await getOrderList(params);
        const newList = response.data?.list || [];
        if (newList.length > 0) {
          this.cardData = [...this.cardData, ...newList];
          this.status = 'loadmore';
        } else {
          if (response.data.length === 0) {
            this.status = 'nomore';
          } else {
            this.status = 'loadmore';
          }
        }
      } catch (error) {
        console.error("Failed to fetch data:", error);
        this.status = 'loadmore';
      }
    },
  },
};

</script>

<style scoped>
page {
  background-color: #F6F6F6;
}

.amount {
  color: #FF9F26;
  font-size: 17px;
}

.phoneNumber {
  font-weight: 600;
  font-size: 19px;
}

.imageUrl {
  width: 18px;
  height: 18px;
  margin: 3px;
}

.phone_content {
  display: flex;
  align-items: center;
}

.status {
  color: #F35252;
}

.title_content {
  display: flex;
  align-items: center;
}

.card {
  margin: 6px 10px;
}

.vertical-block {
  width: 4px;
  height: 15px;
  background-color: #4262F1;
  border-radius: 10px;
  float: left;
  margin-right: 5px;
}

.card {
  padding: 5px;
  background: white;
  margin: 10px 0;
}

.first-row,
.second-row,
.third-row,
.fourth-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.left-text {
  float: left;
  color: #333333;
  font-family: Source Han Sans CN-Regular;
  font-weight: 400;
  font-size: 14px;
}

.right-text {
  float: right;
}

.loading-text,
.no-more-text {
  text-align: center;
  padding: 10px;
  color: #666;
}
</style>
